﻿@model WebApp.Models.WaterMeterRecord
@{
  ViewData["Title"] = "水表历史记录";
  ViewData["PageName"] = "WaterMeterRecord";
  ViewData["Heading"] = "<i class='fal fa-window text-primary'></i>  水表历史记录";
  ViewData["Category1"] = "水务管理中心";
  ViewData["PageDescription"] = "";
}
@section HeadBlock {
  <link href="@Fingerprint.Tag("/Content/css/notifications/toastr/toastr.css")" rel="stylesheet" />
  <link href="@Fingerprint.Tag("/Scripts/easyui/themes/insdep/easyui.css")" rel="stylesheet" />
  <link href="@Fingerprint.Tag("/Content/css/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.css")" rel="stylesheet" />
  <link href="@Fingerprint.Tag("/Scripts/plugin/jquery.fileuploader/jquery.fileuploader.min.css")" rel="stylesheet" />
  <link href="@Fingerprint.Tag("/Scripts/plugin/jquery.fileuploader/jquery.fileuploader-theme-dragdrop.css")" rel="stylesheet" />
  <link href="@Fingerprint.Tag("/Scripts/plugin/jquery.fileuploader/font/font-fileuploader.css")" rel="stylesheet" />
  <link href="~/Content/css/formplugins/bootstrap-datepicker/bootstrap-datepicker.css" rel="stylesheet" />
  <link href="~/Content/css/formplugins/select2/select2.bundle.css" rel="stylesheet" />
  <style>
    .select2-container{
      z-index:99999
    }
  </style>
}
<div class="row">
  <div class="col-lg-12 col-xl-12">
    <div id="panel-1" class="panel">
      <div class="panel-hdr">
        <h2>
          水表历史记录
        </h2>
        <div class="panel-toolbar">
          <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"><i class="fal fa-window-minimize"></i></button>
          <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"><i class="fal fa-expand"></i></button>
          @*<button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"><i class="fal fa-times"></i></button>*@
        </div>

      </div>
      <div class="panel-container show">
        <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0  text-muted bg-faded bg-subtlelight-fade ">
          <div class="row no-gutters align-items-center">
            <div class="col">
              <!-- 开启授权控制请参考 @@if (Html.IsAuthorize("Create") -->
              <div class="btn-group btn-group-sm">
                <button onclick="syncLastDataByDatetime()" class="btn btn-primary" data-rel="tooltip" data-placement="bottom" title="同步最新读数"> <i class="fal fa-bolt"></i> 同步最新读数 </button>
              </div>
              <div class="btn-group btn-group-sm">
                <button onclick="downloadQueryDetailDataByDatetime()" class="btn btn-secondary" data-rel="tooltip" data-placement="bottom" title="下载历史数据"> <i class="fal fa-cloud-download"></i> 下载历史数据 </button>
              </div>
              @*<div class="btn-group btn-group-sm">
                  <button onclick="append()" class="btn btn-default"> <span class="fal fa-plus mr-1"></span> @Html.L("Add") </button>
                </div>
                <div class="btn-group btn-group-sm">
                  <button name="deletebutton" disabled onclick="removeit()" class="btn btn-default"> <span class="fal fa-times mr-1"></span> @Html.L("Delete") </button>
                </div>
                <div class="btn-group btn-group-sm">
                  <button name="savebutton" disabled onclick="accept()" class="btn btn-default"> <span class="fal fa-save mr-1"></span> @Html.L("Save") </button>
                </div>
                <div class="btn-group btn-group-sm">
                  <button name="cancelbutton" disabled onclick="reject()" class="btn btn-default"> <span class="fal fa-ban mr-1"></span> @Html.L("Cancel") </button>
                </div>*@
              <div class="btn-group btn-group-sm">
                <button onclick="reload()" class="btn btn-default"> <span class="fal fa-search mr-1"></span> @Html.L("Refresh") </button>
              </div>
              <div class="btn-group btn-group-sm hidden-xs">
                <button type="button" onclick="importexcel('WaterMeterRecord')" class="btn btn-default"><span class="fal fa-cloud-upload mr-1"></span> @Html.L("Import") </button>
                <button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu">
                  <a class="dropdown-item js-waves-on" href="javascript:downloadtemplate()"><span class="fal fa-download"></span> @Html.L("Download") </a>
                </div>
              </div>
              <div class="btn-group btn-group-sm ">
                <button onclick="exportexcel()" class="btn btn-default"> <span class="fal fa-file-excel mr-1"></span>  @Html.L("Export") </button>
              </div>

            </div>
          </div>
        </div>
        <div class="panel-content">
          <div class="table-responsive">
            <table id="watermeterrecords_datagrid">
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div id="queryModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">下载云端水表记录</h4>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form id="query-form" class="needs-validation" novalidate>
          <div class="form-group row">
            <label class="col-form-label col-12  form-label">智能表号</label>
            <div class="col-12">
              <select data-placeholder="选择需要下载数据水表号" class="js-data-example-ajax form-control" multiple="multiple" id="select2-meterid" required></select>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-12  form-label">下载日期段</label>
            <div class="col-12">
              <div class="input-daterange input-group" id="datepicker-5">
                <input type="text" class="form-control" name="startdate" id="startdate" required>
                <div class="invalid-feedback">
                  请输入起始日期
                </div>
                <div class="input-group-append input-group-prepend">
                  <span class="input-group-text fs-xl"><i class="fal fa-ellipsis-h"></i></span>
                </div>
                <input type="text" class="form-control" name="finishdate" id="finishdate" required>
                <div class="invalid-feedback">
                  请输入截至日期
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="dodownload()">下载云端数据</button>
      </div>
    </div>
  </div>
</div>
@{ Html.RenderPartial("_ImportWindow", new ViewDataDictionary { { "EntityName", "WaterMeter" } }); }
@section ScriptsBlock {
  <script src="@Fingerprint.Tag("/Scripts/plugin/numeral/numeral.min.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/plugin/filesaver/FileSaver.min.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/plugin/filesaver/jquery.fileDownload.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/notifications/toastr/toastr.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/plugin/jquery.serializejson/jquery.serializejson.min.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/plugin/moment/moment-with-locales.min.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/plugin/jquery.fileuploader/jquery.fileuploader.min.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/easyui/jquery.easyui.min.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/easyui/plugins/datagrid-filter.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/easyui/plugins/columns-ext.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/jquery.easyui.component.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/jquery.extend.formatter.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/easyui/plugins/columns-reset.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/easyui/locale/easyui-lang-zh_CN.js")"></script>
  <script src="@Fingerprint.Tag("/Scripts/jquery.custom.extend.js")"></script>
  <script src="~/Scripts/formplugins/select2/select2.bundle.js"></script>
  <script src="~/Scripts/formplugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
  <script type="text/javascript">
      //是否强制从后台取值
      const REQUIRBACKEND = false;
      //是否开启行内编辑
      const EDITINLINE = true;
    var watermeterrecord = {};

    $(() => {

      $('#select2-meterid').select2({
        allowClear: true,
        maximumSelectionLength: 100,
        ajax: {
          url: '/WaterMeters/GetMeterIdList',
          data: function (params) {
            var query = {
              search: params.term
            }
            return query;
          },
          processResults: function (data) {
            console.log(data)
            return {
              results: data
            };
          }
        }
      });

      var controls = {
                leftArrow: '<i class="fal fa-angle-left" style="font-size: 1.25rem"></i>',
                rightArrow: '<i class="fal fa-angle-right" style="font-size: 1.25rem"></i>'
            }
      $('#datepicker-5').datepicker(
                {
                    todayHighlight: true,
                    templates: controls
                });
    })
      //下载历史数据
  async function downloadQueryDetailDataByDatetime() {
    $('#queryModal').modal('toggle')

  }
  async function dodownload() {

    const meterid = $('#select2-meterid').val();
    console.log(meterid)
    const istrue=document.getElementById('query-form').reportValidity()

    console.log(istrue);
    if (!istrue) {
      return;
    }
    let dt1 = $('#startdate').val();
    let dt2 = $('#finishdate').val();
    if (dt1 && dt2) {

      $.messager.progress({ title: '请等待', msg: '正在同步云端数据...', interval: 200 });
      const result = await $.post(`/WaterMeterRecords/DownloadDetailDataByDatetime`,
        { dt1:moment(dt1).format('YYYY-MM-DD'),
          dt2:moment(dt2).format('YYYY-MM-DD'),
          meterid: meterid
        });
      if (result.success) {
        toastr.success('同步完成!');
        reload();
        $('#queryModal').modal('toggle');
      } else {
        $.messager.alert('错误', result.err, 'error');
      }
      $.messager.progress('close');
    } else {
      $.messager.alert('提示', '请输入开始日期和截至日期');
    }
  }
      //手工同步
  async function syncLastDataByDatetime() {
    $.messager.progress({ title: '请等待', msg: '正在同步云端数据...', interval:200});
    const result =await $.get('/WaterMeterRecords/SyncLastDataByDatetime');
    if (result.success) {
       toastr.success('同步完成!');
      reload();
    } else {
       $.messager.alert('错误',result.err,'error');
    }
    $.messager.progress('close');
  }
      //下载Excel导入模板
      function downloadtemplate() {
          //默认模板路径存放位置
          const url = '/FileUpload/Download?file=/ExcelTemplate/WaterMeterRecord.xlsx';
          $.fileDownload(url)
           .done(() => {
                    //console.log('file download a success!');
                    toastr.success('模板下载完成!');
                })
           .fail(() => {
               $.messager.alert('下载模板失败','没有下载到导入模板[WaterMeterRecord.xlsx]文件!','error');
            });
       }
       //打印
       function print() {
            $dg.datagrid('print', 'DataGrid');
       }
       //执行导出下载Excel
       function exportexcel() {
                const filterRules = JSON.stringify($dg.datagrid('options').filterRules);
                //console.log(filterRules);
                $.messager.progress({ title: '正在执行导出!' });
                let formData = new FormData();
                formData.append('filterRules', filterRules);
                formData.append('sort', 'Id');
                formData.append('order', 'asc');
                $.postDownload('/WaterMeterRecords/ExportExcel', formData).then(res => {
                    $.messager.progress('close');
                    toastr.success('导出成功!');
                }).catch(err => {
                    //console.log(err);
                    $.messager.progress('close');
                    $.messager.alert('导出失败', err.statusText, 'error');
                });

        }
        //显示帮助信息
        function dohelp() {
            toastr.info('有问题请联系管理员 <br><i class="fa fa-envelope-o" aria-hidden="true"></i> : demo@admin.com','帮助');
        }
       var editIndex = undefined;
       //重新加载数据
       function reload() {
            if (EDITINLINE && endEditing()) {
                $dg.datagrid('uncheckAll');
                $dg.datagrid('reload');
            } else if (!EDITINLINE) {
                $dg.datagrid('uncheckAll');
                $dg.datagrid('reload');
            }
       }
      //关闭编辑状态
      function endEditing() {
            if (editIndex === undefined) {
                return true;
            }
            if ($dg.datagrid('validateRow', editIndex)) {
                $dg.datagrid('endEdit', editIndex);
                return true;
            } else {
                const invalidinput = $('input.validatebox-invalid',$dg.datagrid('getPanel'));
                const fieldnames = invalidinput.map((index, item) => {
                  return $(item).attr('placeholder') || $(item).attr('id');
                });
                $.messager.alert('提示', `${Array.from(fieldnames)} 输入有误.`, 'error');
                return false;
            }
        }
    //单击列开启编辑功能
    function onClickCell(index, field) {
        watermeterrecord = $dg.datagrid('getRows')[index];
        const _actions = ['action', 'ck'];
        if (!EDITINLINE || $.inArray(field, _actions) >= 0) {
                return;
        }
        if (editIndex !== index) {
            if (endEditing()) {
                $dg.datagrid('selectRow', index)
                   .datagrid('beginEdit', index);
                hook = true;
                editIndex = index;
                const ed = $dg.datagrid('getEditor', { index: index, field: field });
                if (ed) {
                        ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
            } else {
                $dg.datagrid('selectRow', editIndex);
            }
        }
    }
    //新增记录
    async function append() {
       watermeterrecord = {  };
        //需要后台创建对象
       if (REQUIRBACKEND) {
         watermeterrecord = await $.get('/WaterMeterRecords/NewItem');
       }
        if (!EDITINLINE) {
           //弹出新增窗口
           openwatermeterrecorddetailwindow(watermeterrecord, 'Added');
        } else {
            if (endEditing()) {
                //对必填字段进行默认值初始化
                $dg.datagrid('insertRow',
                              {
                                  index: 0,
                                  row: watermeterrecord
                               });
                editIndex = 0;
                $dg.datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
                hook = true;
            }
        }
    }
    //删除编辑的行
    function removeit() {
       if (EDITINLINE) {
          if (editIndex !== undefined) {
             $dg.datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
               editIndex = undefined;
               hook = true;
               $("button[name*='savebutton']").prop('disabled', false);
               $("button[name*='cancelbutton']").prop('disabled', false);
           }else{
              const rows = $dg.datagrid('getChecked');
              rows.slice().reverse().forEach(row => {
                const rowindex = $dg.datagrid('getRowIndex', row);
                $dg.datagrid('deleteRow', rowindex);
                hook = true;
                $("button[name*='savebutton']").prop('disabled', false);
                $("button[name*='cancelbutton']").prop('disabled', false);
            });
           }
        } else {
          deletechecked();
        }
    }
  //删除该行
  function deleteRow(id) {
    $.messager.confirm('确认', '你确定要删除该记录?', result => {
      if (result) {
        dodeletechecked([id]);
      }
     });
  }
    //删除选中的行
    function deletechecked() {
        const id = $dg.datagrid('getChecked').filter(item=>item.Id!=null && item.Id > 0).map(item => {
                   return item.Id;
                });;
        if (id.length > 0) {
           $.messager.confirm('确认', `你确定要删除这 <span class='badge badge-icon position-relative'>${id.length} </span> 行记录?`, result => {
                if (result) {
                    dodeletechecked(id);
                    }
                });
         } else {
                $.messager.alert('提示', '请先选择要删除的记录!','question');
         }
     }
    //执行删除
    function dodeletechecked(id){
       $.post('/WaterMeterRecords/DeleteChecked', { id: id })
                         .done(response => {
                                if (response.success) {
                                    toastr.error(`成功删除[${id.length}]行记录`);
                                    reload();
                                } else {
                                    $.messager.alert('错误', response.err,'error');
                                }
                          })
                          .fail((jqXHR, textStatus, errorThrown) => {
                             $.messager.alert('异常', `${jqXHR.status}: ${jqXHR.statusText} `, 'error');
                          });
    }
    //提交保存后台数据库
    function accept() {
      if (endEditing()) {
        if ($dg.datagrid('getChanges').length > 0) {
          const inserted = $dg.datagrid('getChanges', 'inserted').map(item => {
          item.TrackingState = 1;
          return item;
        });
        const updated = $dg.datagrid('getChanges', 'updated').map(item => {
          item.TrackingState = 2
          return item;
        });
        const deleted = $dg.datagrid('getChanges', 'deleted').map(item => {
          item.TrackingState = 3
          return item;
        });
        //过滤已删除的重复项
        const changed = inserted.concat(updated.filter(item => {
            return !deleted.includes(item);
          })).concat(deleted);
        //console.table(changed);
        $.messager.progress({ title: '请等待', msg: '正在保存数据...', interval:200});
        $.post('/WaterMeterRecords/SaveData', {watermeterrecords:changed})
                     .done(response => {
                     $.messager.progress('close');
                           //console.log(response);
                           if (response.success) {
                               toastr.success('保存成功');
                               $dg.datagrid('acceptChanges');
                               reload();
                               hook = false;
                           } else {
                               $.messager.alert('错误', response.err ,'error');
                           }
                        })
                      .fail((jqXHR, textStatus, errorThrown) => {
                        $.messager.progress('close');
                        $.messager.alert('异常', `${jqXHR.status}: ${jqXHR.statusText} `, 'error');
                      });
                }
            }
    }
    function reject() {
        $dg.datagrid('rejectChanges');
        editIndex = undefined;
        hook = false;
    }
    function getChanges() {
        const rows = $dg.datagrid('getChanges');
        //console.log(rows.length + ' rows are changed!');
    }
    //弹出明细信息
    async function showdetailswindow(id,index) {
        const watermeterrecord = $dg.datagrid('getRows')[index];
        if (REQUIRBACKEND) {
           watermeterrecord = await $.get('/WaterMeterRecords/GetItem/' + id);
        }
        openwatermeterrecorddetailwindow(watermeterrecord,'Modified');
    }

    //初始化定义datagrid
    var $dg = $('#watermeterrecords_datagrid');
    $(() => {
      //定义datagrid结构
      $dg.datagrid({
        height:670,
        pageSize: 15,
        rownumbers: true,
        checkOnSelect: false,
        selectOnCheck: false,
        idField: 'Id',
        sortName: 'datetime',
        sortOrder: 'desc',
        remoteFilter: true,
        singleSelect: false,
        method: 'get',
        pagination: true,
        clientPaging: false,
        striped: true,
        pageList: [15, 20, 50, 100, 500, 2000],
        onHeaderContextMenu: function (e, field) {
          e.preventDefault();
          $(this).datagrid('columnMenu').menu('show', {
            left: e.pageX,
            top: e.pageY
          });
        },
        onBeforeLoad: function () {
          const that = $(this);
          document.addEventListener('smartPanel.onFullscreen', () => {
            setTimeout(() => {
              that.datagrid('resize');
            }, 200)
          })
        },
        onLoadSuccess: function (data) {
          editIndex = undefined;
          $("button[name*='deletebutton']").prop('disabled', true);
          $("button[name*='savebutton']").prop('disabled', true);
          $("button[name*='cancelbutton']").prop('disabled', true);
        },
        onCheck: function () {
          $("button[name*='deletebutton']").prop('disabled', false);
        },
        onUncheck: function () {
          const checked = $(this).datagrid('getChecked').length > 0;
          $("button[name*='deletebutton']").prop('disabled', !checked);
        },
        onSelect: function (index, row) {
          watermeterrecord = row;
        },
        onBeginEdit: function (index, row) {
          //const editors = $(this).datagrid('getEditors', index);

        },
        onEndEdit: function (index, row) {

        },
        onBeforeEdit: function (index, row) {
          editIndex = index;
          row.editing = true;
          $("button[name*='deletebutton']").prop('disabled', false);
          $("button[name*='cancelbutton']").prop('disabled', false);
          $("button[name*='savebutton']").prop('disabled', false);
          $(this).datagrid('refreshRow', index);
        },
        onAfterEdit: function (index, row) {
          row.editing = false;
          editIndex = undefined;
          $(this).datagrid('refreshRow', index);
        },
        onCancelEdit: function (index, row) {
          row.editing = false;
          editIndex = undefined;
          $("button[name*='deletebutton']").prop('disabled', true);
          $("button[name*='savebutton']").prop('disabled', true);
          $("button[name*='cancelbutton']").prop('disabled', true);
          $(this).datagrid('refreshRow', index);
        },
        frozenColumns: [[
          /*开启CheckBox选择功能*/
          { field: 'ck', checkbox: true },
        ]],
        columns: [[
          { /*Id*/
            field: 'Id',
            title: '<span class="required">@Html.DisplayNameFor(model => model.Id)</span>',
            width: 120,
            sortable: true,
            resizable: true,
            hidden: true
          },
          {    /*水表状态*/
            field: 'meterStatus',
            title: '@Html.DisplayNameFor(model => model.meterStatus)',
            width: 120,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.meterStatus)', required: false, validType: 'length[0,10]' }
            },
            sortable: true,
            resizable: true
          },
          {   /*采集时间*/
            field: 'datetime',
            title: '<span class="required">@Html.DisplayNameFor(model => model.datetime)</span>',
            width: 150,
            align: 'right',
            hidden: false,
            editor: {
              type: 'datetimebox',
              options: { prompt: '@Html.DisplayNameFor(model => model.datetime)', required: true }
            },
            formatter: datetimeformatter,
            sortable: true,
            resizable: true
          },
          {    /*表号*/
            field: 'meterId',
            title: '@Html.DisplayNameFor(model => model.meterId)',
            width: 120,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.meterId)', required: false, validType: 'length[0,20]' }
            },
            sortable: true,
            resizable: true
          },
          {    /*水表当前读数(吨)*/
            field: 'water',
            title: '<span class="required">@Html.DisplayNameFor(model => model.water)</span>',
            width: 100,
            align: 'right',
            hidden: false,
            editor: {
              type: 'numberspinner',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.water)',
                required: true,
                precision: 2,

              }
            },
            formatter: numberformatter,
            sortable: true,
            resizable: true
          },
          {    /*累计流量*/
            field: 'reverseWater',
            title: '<span class="required">@Html.DisplayNameFor(model => model.reverseWater)</span>',
            width: 100,
            align: 'right',
            hidden: false,
            editor: {
              type: 'numberspinner',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.reverseWater)',
                required: true,
                precision: 2,

              }
            },
            formatter: numberformatter,
            sortable: true,
            resizable: true
          },
          {    /*温度*/
            field: 'temperature',
            title: '<span class="required">@Html.DisplayNameFor(model => model.temperature)</span>',
            width: 100,
            align: 'right',
            hidden: false,
            editor: {
              type: 'numberspinner',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.temperature)',
                required: true,
                precision: 2,

              }
            },
            formatter: numberformatter,
            sortable: true,
            resizable: true
          },
          {    /*瞬时流量*/
            field: 'flowrate',
            title: '<span class="required">@Html.DisplayNameFor(model => model.flowrate)</span>',
            width: 100,
            align: 'right',
            hidden: false,
            editor: {
              type: 'numberspinner',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.flowrate)',
                required: true,
                precision: 2,

              }
            },
            formatter: numberformatter,
            sortable: true,
            resizable: true
          },
          {    /*压力 (bar)*/
            field: 'pressure',
            title: '<span class="required">@Html.DisplayNameFor(model => model.pressure)</span>',
            width: 100,
            align: 'right',
            hidden: false,
            editor: {
              type: 'numberspinner',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.pressure)',
                required: true,
                precision: 2,

              }
            },
            formatter: numberformatter,
            sortable: true,
            resizable: true
          },
          {    /*电压*/
            field: 'voltage',
            title: '<span class="required">@Html.DisplayNameFor(model => model.voltage)</span>',
            width: 100,
            align: 'right',
            hidden: false,
            editor: {
              type: 'numberspinner',
              options: {
                prompt: '@Html.DisplayNameFor(model => model.voltage)',
                required: true,
                precision: 2,

              }
            },
            formatter: numberformatter,
            sortable: true,
            resizable: true
          },
          {    /*阀门状态*/
            field: 'valveStatus',
            title: '@Html.DisplayNameFor(model => model.valveStatus)',
            width: 120,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.valveStatus)', required: false, validType: 'length[0,20]' }
            },
            sortable: true,
            resizable: true
          },
          {    /*用户编号*/
            field: 'userId',
            title: '@Html.DisplayNameFor(model => model.userId)',
            width: 120,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.userId)', required: false, validType: 'length[0,20]' }
            },
            sortable: true,
            resizable: true
          },
          {    /*IMEI*/
            field: 'imei',
            title: '@Html.DisplayNameFor(model => model.imei)',
            width: 200,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@Html.DisplayNameFor(model => model.imei)', required: false, validType: 'length[0,50]' }
            },
            sortable: true,
            resizable: true
          },
            @*{    /*所属单位*/
                 field:'OrgName',
                 title:'@Html.DisplayNameFor(model => model.OrgName)',
                 width:200,
                 hidden:false,
                 editor:{
                          type:'textbox',
                          options:{ prompt:'@Html.DisplayNameFor(model => model.OrgName)',required:false, validType: 'length[0,80]' }
                       },
                 sortable:true,
                 resizable:true
            },*@
        ]]
      }).datagrid('enableFilter', [
        {   /*Id*/
          field: 'Id',
          type: 'numberbox',
          op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
        },
        {   /*水表当前读数(吨)*/
          field: 'water',
          type: 'numberbox',
          op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
        },
        {   /*累计流量*/
          field: 'reverseWater',
          type: 'numberbox',
          op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
        },
        {   /*温度*/
          field: 'temperature',
          type: 'numberbox',
          op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
        },
        {   /*瞬时流量*/
          field: 'flowrate',
          type: 'numberbox',
          op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
        },
        {   /*压力 (bar)*/
          field: 'pressure',
          type: 'numberbox',
          op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
        },
        {   /*电压*/
          field: 'voltage',
          type: 'numberbox',
          op: ['equal', 'notequal', 'less', 'lessorequal', 'greater', 'greaterorequal']
        },
        {     /*采集时间*/
          field: 'datetime',
          type: 'dateRange',
          options: {
          }
        },
      ]).datagrid('load', '/WaterMeterRecords/GetData');
    });

  </script>



}


